<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../libs/jquery.mobile-1.4.4/jquery.mobile-1.4.4.min.css" />

    <script data-main="../js/app" src="../libs/requirejs/require.js"></script>
    <script type="text/javascript" src="phonegap.js"></script>
    <style type="text/css">
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

        }
    </style>

    <style type="text/css">
        .ui-btn-icon-left::after, .ui-btn-icon-right::after, .ui-btn-icon-top::after, .ui-btn-icon-bottom::after, .ui-btn-icon-notext::after {
            background-color: rgba(0,0,0,0);
        }
        .ui-icon-carat-r::after {
            background-image: url("../images/icon_chevron_right.png");
            background-size: 30px;
        }
        .ui-icon-carat-l::after {
            background-image: url("../images/icon_chevron_down.png");
            background-size: 26px;
        }
        .ui-icon-no::after {
            background-image: url("");
        }
        .ui-page-theme-a .ui-btn, html .ui-bar-a .ui-btn, html .ui-body-a .ui-btn, html body .ui-group-theme-a .ui-btn, html head+body .ui-btn.ui-btn-a, .ui-page-theme-a .ui-btn:visited, html .ui-bar-a .ui-btn:visited, html .ui-body-a .ui-btn:visited, html body .ui-group-theme-a .ui-btn:visited, html head+body .ui-btn.ui-btn-a:visited {
            background-color: #ffffff;
        }

    </style>
    <style>
        .nor {
            width: 25px;
            height: 25px;
            background: url("../images/select.png");
        }

        .sel{
            width: 25px;
            height: 25px;
            background: url("../images/selected.png");
        }

    </style>

</head>

<body>

<!--Filter页面-->
<div data-role="page" id="filter" style="background-color: rgb(218,233,248);">
<!--头部-->
<div data-role="header" style="background-color: #f26647;height: 40px;display: -webkit-flex;display: flex">
    <h1 style="color: #ffffff;font-family: Arial;font-size: 18px;font-weight: normal;padding: 0px;margin: auto">Filter</h1>
    <img id="filter_btn_menu" src="../images/12Menu.png" alt="" class="ui-btn-left" style="width:23px;height:23px;margin:5px 5px">
    <span id="filter_btn_applay" class="ui-btn-right" style="font-family: Arial;margin: auto;padding: 8px;font-size: 14px;color: #ffffff;font-weight: normal">Apply</span>
</div>

<!--内容-->
<div id="filter_content" data-role="content" style="width:100%; height:0px; padding: 0px;margin: 0px;overflow-y: scroll;-webkit-overflow-scrolling:touch">
    <div>
        <ul data-role="listview" data-inset="true" style="border-radius: 0px;margin: 0px">
            <li style="padding: 0px;height: 40px;">
                <div class="ui-grid-a" style="height: 40px;display: -webkit-flex;display: flex">
                    <div class="ui-block-a" style="font-family: Arial;font-size: 14px;width: 90%;height: auto;margin: auto;padding-left: 18%">
                        All
                    </div>
                    <div class="ui-block-b" style="width: 10%;height: auto;margin: auto;">
                        <!--<input id="check_all" type="checkbox" style="height: auto;width: auto"/>-->
                        <div id="all_check" name="sbox2" class="nor">
                        </div>
                    </div>
                </div>
            </li>
            <li style="padding: 0px;height: 40px;">
                <div class="ui-grid-b" style="height: 40px;display: -webkit-flex;display: flex">
                    <div class="ui-block-a" style="width: 15%;height: auto;margin: auto;overflow: auto">
                        <div style="background-color: #6699c2;padding: 2px 4px;width: 39px;height: 14px;text-align: center;line-height: 1.2;font-family: Arial;font-size: 8px;color: #ffffff;margin-left: 10px">COMM</div>
                    </div>
                    <div class="ui-block-b" style="width: 75%;height: auto;margin: auto;">
                        <div style="font-family: Arial;font-size: 14px;margin-left: 10px">
                            Communications
                        </div>
                    </div>
                    <div class="ui-block-c ui-checkbox" style="width: 10%;height: auto;margin: auto;">
                        <!--<input id="check_comm" type="checkbox" value="None" name="check1" style="height: auto;width: auto;"/>-->
                        <div name="sbox" class="nor" alt="Communications">
                        </div>
                    </div>
                </div>
            </li>
            <li style="padding: 0px;height: 40px;">
                <div class="ui-grid-b" style="height: 40px;display: -webkit-flex;display: flex">
                    <div class="ui-block-a" style="width: 15%;height: auto;margin: auto;overflow: auto">
                        <div style="background-color: #a3d963;padding: 2px 4px;width: 27px;height: 14px;text-align: center;line-height: 1.2;font-family: Arial;font-size: 8px;color: #ffffff;margin-left: 10px">CS</div>
                    </div>
                    <div class="ui-block-b" style="width: 75%;height: auto;margin: auto;">
                        <div style="font-family: Arial;font-size: 14px;margin-left: 10px">
                            Corporate Sustainability
                        </div>
                    </div>
                    <div class="ui-block-c" style="width: 10%;height: auto;margin: auto;">
                        <!--<input id="check_cs" type="checkbox" name="check1" style="height: auto;width: auto"/>-->
                        <div name="sbox" class="nor" alt="Corporate Sustainability">
                        </div>
                    </div>
                </div>
            </li>
            <li style="padding: 0px;height: 40px;">
                <div class="ui-grid-b" style="height: 40px;display: -webkit-flex;display: flex">
                    <div class="ui-block-a" style="width: 15%;height: auto;margin: auto;overflow: auto">
                        <div style="background-color: #e8e012;padding: 2px 4px;width: 30px;height: 14px;text-align: center;line-height: 1.2;font-family: Arial;font-size: 8px;color: #ffffff;margin-left: 10px">FIN</div>
                    </div>
                    <div class="ui-block-b" style="width: 75%;height: auto;margin: auto;">
                        <div style="font-family: Arial;font-size: 14px;margin-left: 10px">
                            Finance
                        </div>
                    </div>
                    <div class="ui-block-c" style="width: 10%;height: auto;margin: auto;">
                        <!--<input id="check_fin" type="checkbox" name="check1" style="height: auto;width: auto"/>-->
                        <div name="sbox" class="nor" alt="Finance">
                        </div>
                    </div>
                </div>
            </li>
            <li style="padding: 0px;height: 40px;">
                <div class="ui-grid-b" style="height: 40px;display: -webkit-flex;display: flex">
                    <div class="ui-block-a" style="width: 15%;height: auto;margin: auto;overflow: auto">
                        <div style="background-color: #a3bdad;padding: 2px 4px;width: 30px;height: 14px;text-align: center;line-height: 1.2;font-family: Arial;font-size: 8px;color: #ffffff;margin-left: 10px">GTU</div>
                    </div>
                    <div class="ui-block-b" style="width: 75%;height: auto;margin: auto;">
                        <div style="font-family: Arial;font-size: 14px;margin-left: 10px">
                            Trade Union
                        </div>
                    </div>
                    <div class="ui-block-c" style="width: 10%;height: auto;margin: auto;">
                        <!--<input id="check_gtu" type="checkbox" name="check1" style="height: auto;width: auto"/>-->
                        <div name="sbox" class="nor" alt="Trade Union">
                        </div>
                    </div>
                </div>
            </li>
            <li style="padding: 0px;height: 40px;">
                <div class="ui-grid-b" style="height: 40px;display: -webkit-flex;display: flex">
                    <div class="ui-block-a" style="width: 15%;height: auto;margin: auto;overflow: auto">
                        <div style="background-color: #e6b012;padding: 2px 4px;width: 27px;height: 14px;text-align: center;line-height: 1.2;font-family: Arial;font-size: 8px;color: #ffffff;margin-left: 10px">HR</div>
                    </div>
                    <div class="ui-block-b" style="width: 75%;height: auto;margin: auto;">
                        <div style="font-family: Arial;font-size: 14px;margin-left: 10px">
                            Human Resources
                        </div>
                    </div>
                    <div class="ui-block-c" style="width: 10%;height: auto;margin: auto;">
                        <!--<input id="check_hr" type="checkbox" name="check1" style="height: auto;width: auto"/>-->
                        <div name="sbox" class="nor" alt="Human Resources">
                        </div>
                    </div>
                </div>
            </li>
            <li style="padding: 0px;height: 40px;">
                <div class="ui-grid-b" style="height: 40px;display: -webkit-flex;display: flex">
                    <div class="ui-block-a" style="width: 15%;height: auto;margin: auto;overflow: auto">
                        <div style="background-color: #75c2bd;padding: 2px 4px;width: 40px;height: 14px;text-align: center;line-height: 1.2;font-family: Arial;font-size: 8px;color: #ffffff;margin-left: 10px">INNO</div>
                    </div>
                    <div class="ui-block-b" style="width: 75%;height: auto;margin: auto;">
                        <div style="font-family: Arial;font-size: 14px;margin-left: 10px">
                            Innovation
                        </div>
                    </div>
                    <div class="ui-block-c" style="width: 10%;height: auto;margin: auto;">
                        <!--<input id="check_inno" type="checkbox" name="check1" style="height: auto;width: auto"/>-->
                        <div name="sbox" class="nor" alt="Innovation">
                        </div>
                    </div>
                </div>
            </li>
            <li style="padding: 0px;height: 40px;">
                <div class="ui-grid-b" style="height: 40px;display: -webkit-flex;display: flex">
                    <div class="ui-block-a" style="width: 15%;height: auto;margin: auto;overflow: auto">
                        <div style="background-color: #8d7c81;padding: 2px 4px;width: 30px;height: 14px;text-align: center;line-height: 1.2;font-family: Arial;font-size: 8px;color: #ffffff;margin-left: 10px">OPS</div>
                    </div>
                    <div class="ui-block-b" style="width: 75%;height: auto;margin: auto;">
                        <div style="font-family: Arial;font-size: 14px;margin-left: 10px">
                            Center Operations
                        </div>
                    </div>
                    <div class="ui-block-c" style="width: 10%;height: auto;margin: auto;">
                        <!--<input id="check_ops" type="checkbox" name="check1" style="height: auto;width: auto"/>-->
                        <div name="sbox" class="nor" alt="Center Operations">
                        </div>
                    </div>
                </div>
            </li>
            <li style="padding: 0px;height: 40px;">
                <div class="ui-grid-b" style="height: 40px;display: -webkit-flex;display: flex">
                    <div class="ui-block-a" style="width: 15%;height: auto;margin: auto;overflow: auto">
                        <div style="background-color: #7a77ae;padding: 2px 4px;width: 27px;height: 14px;text-align: center;line-height: 1.2;font-family: Arial;font-size: 8px;color: #ffffff;margin-left: 10px">TD</div>
                    </div>
                    <div class="ui-block-b" style="width: 75%;height: auto;margin: auto;">
                        <div style="font-family: Arial;font-size: 14px;margin-left: 10px">
                            Technical Development
                        </div>
                    </div>
                    <div class="ui-block-c" style="width: 10%;height: auto;margin: auto;">
                        <!--<input id="check_td" type="checkbox" name="check1" style="height: auto;width: auto"/>-->
                        <div name="sbox" class="nor" alt="Technical Development">
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

<!--filter页面push推出-->
<div data-role="panel" id="filter_panel_menu" data-position="left" data-display="overlay" style="background-color: #f26647">
    <ul id="filter_push_ul" data-role="listview" style="background-color: #f26647">
        <li style="background-color: #f26647;color: #ffffff;padding: 12px 0px 32px 10px;height: 82px;">
            <span style="font-family: Arial;font-size: 16px;font-weight: normal">Welcome, <span id="filter_push_username"></span></span>
        </li>
        <li id="filter_push_newsroom" style="background-color: #f26647;color: #ffffff;padding: 0px;font-family: Arial;font-size: 16px;font-weight: normal;height: 52px">
            <div class="ui-grid-a" style="height:100%">
                <div class="ui-block-a" style="width: 20%;margin: 0 auto;height:100%;display:-webkit-flex;display:flex;">
                    <img src="../images/13ViewAll.png" style="width: 22px;height: 22px;margin:auto" alt=""/>
                </div>
                <div class="ui-block-b" style="width: 80%">
                    <span style="font-family: Arial;font-size: 16px;font-weight: normal;line-height: 3">Newsroom</span>
                </div>
            </div>
        </li>
        <li style="background-color: #f26647;color: #ffffff;padding: 0px;font-family: Arial;font-size: 16px;font-weight: normal;height: 52px">
            <div class="ui-grid-a" style="height:100%">
                <div class="ui-block-a" style="width: 20%;margin: 0 auto;height:100%;display:-webkit-flex;display:flex;">
                    <img src="../images/39Calendar.png" style="width: 22px;height: 22px;margin:auto" alt=""/>
                </div>
                <div class="ui-block-b" style="width: 80%">
                    <span style="font-family: Arial;font-size: 16px;font-weight: normal;line-height: 3">Activities</span>
                </div>
            </div>
        </li>
        <li style="background-color: #f26647;color: #ffffff;padding: 0px;font-family: Arial;font-size: 16px;font-weight: normal;height: 52px">
            <div class="ui-grid-a" style="height:100%">
                <div class="ui-block-a" style="width: 20%;margin: 0 auto;height:100%;display:-webkit-flex;display:flex;">
                    <img src="../images/icon-ar-solid-white-100.png" style="width: 22px;height: 22px;margin:auto" alt=""/>
                </div>
                <div class="ui-block-b" style="width: 80%">
                    <span style="font-family: Arial;font-size: 16px;font-weight: normal;line-height: 3">Discovery</span>
                </div>
            </div>
        </li>
        <li style="background-color: #f26647;color: #ffffff;padding: 0px;font-family: Arial;font-size: 16px;font-weight: normal;height: 52px">
            <div class="ui-grid-a" style="height:100%">
                <div class="ui-block-a" style="width: 20%;margin: 0 auto;height:100%;display:-webkit-flex;display:flex;">
                    <img src="../images/29User.png" style="width: 22px;height: 22px;margin:auto" alt=""/>
                </div>
                <div class="ui-block-b" style="width: 80%">
                    <span style="font-family: Arial;font-size: 16px;font-weight: normal;line-height: 3">My Corner</span>
                </div>
            </div>
        </li>
        <li id="filter_push_setting" style="background-color: #f26647;color: #ffffff;padding: 0px;font-family: Arial;font-size: 16px;font-weight: normal;height: 52px">
            <div class="ui-grid-a" style="height:100%">
                <div class="ui-block-a" style="width: 20%;margin: 0 auto;height:100%;display:-webkit-flex;display:flex;">
                    <img src="../images/44Settings.png" style="width: 22px;height: 22px;margin:auto" alt=""/>
                </div>
                <div class="ui-block-b" style="width: 80%">
                    <span style="font-family: Arial;font-size: 16px;font-weight: normal;line-height: 3">Settings</span>
                </div>
            </div>
        </li>
        <li id="filter_auto_height" style="background-color: #f26647;color: #ffffff;padding: 25px 0px 25px 0px">

        </li>
        <li id="filter_push_logon" style="background-color: #f26647;color: #ffffff;padding: 0px;font-family: Arial;font-size: 16px;font-weight: normal;height: 64px" >
            <div class="ui-grid-a" style="height:100%">
                <div class="ui-block-a" style="width: 20%;margin: 0 auto;height:100%;display:-webkit-flex;display:flex;">
                    <img src="../images/43LogOff.png" style="width: 22px;height: 22px;margin:auto" alt=""/>
                </div>
                <div class="ui-block-b" style="width: 80%;height:100%;display:-webkit-flex;display:flex;">
                    <span style="font-family: Arial;font-size: 16px;font-weight: normal;line-height: 3;margin:auto 0px">Log off</span>
                </div>
            </div>
        </li>
    </ul>
</div>

</div>

</body>
</html>